<template>
  <div>
    <div :id="id"
         class="echart"
         :style="{height: '430px', width: '100%'}"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  props: {
    id: {
      type: String,
    },
    title: {
      type: String,
    },
    HZYdata: {
      type: Array,
      default: () => [],
    },
    HZXdata: {
      type: Array,
      default: () => [],
    },
    HZLegendData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      Ydata: [],
      Xdata: [],
      legendData: [],
      titleName: '',
    }
  },
  mounted() {
    this.Ydata = this.HZYdata
    this.Xdata = this.HZXdata
    this.titleName = this.title
    this.legendData = this.HZLegendData
    this.drawLine()
  },
  created() {},
  watch: {
    title: {
      handler(val) {
        this.titleName = val
        this.drawLine()
      },
      deep: true,
      //   immediate: true,
    },
    HZYdata: {
      handler(val) {
        this.Ydata = val
        this.drawLine()
      },
      deep: true,
      //   immediate: true,
    },

    HZXdata: {
      handler(val) {
        this.Xdata = val
        this.drawLine()
      },
      deep: true,
      //   immediate: true,
    },
    HZLegendData: {
      handler(val) {
        this.legendData = val
        this.drawLine()
      },
      deep: true,
      //   immediate: true,
    },
  },
  methods: {
    drawLine() {
      let chartDom = document.getElementById(this.id)
      let myChart = echarts.init(chartDom)
      let resultarr = []
      var start = resultarr.length - 8
      var end = resultarr.length - 1
      var colors = ['#80FFA5', '#00DDFF', '#FFBF00', '#37A2FF', '#FF0087']
      const option = {
        color: colors,
        title: {
          text: this.titleName,
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: this.legendData,
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        toolbox: {
          feature: {
            magicType: {
              show: true,
              type: ['line', 'bar'],
            },
          },
          iconStyle: {
            borderColor: '#0EA9DF',
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.Xdata,
        },
        yAxis: {
          type: 'value',
        },
        dataZoom: [
          {
            type: 'inside',
            startValue: start,
            endValue: end,
          },
        ],
        series: this.Ydata,
      }
      option && myChart.setOption(option)
      window.onresize = () => {
        myChart.resize()
      }
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep.echart {
  width: 100%;
  height: 100%;
  div {
    &:nth-child(1) {
      width: 100% !important;
      height: 100% !important;
      canvas {
        width: 100% !important;
        height: 100% !important;
      }
    }
  }
}
